<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-AR"><!-- InstanceBegin template="/Templates/tutorial.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Elementos estructurales esenciales de un documento HTML - Tutorial Maquetado HTML</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/screen-black-on-white.css" media="screen" title="Negro sobre blanco" />
<link rel="alternate stylesheet" type="text/css" href="../css/screen-white-on-black.css" media="screen" title="Blanco sobre negro" />
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
<meta name="author" content="Martin Alterisio &lt;malterisio777@gmail.com&gt;" />
<meta name="copyright" content="&copy; Martin Alterisio 2009" />
<link rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/legalcode" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/tutorial.js"></script>
<!-- InstanceBeginEditable name="head" -->
<meta name="date" content="2009-10-14" />
<!-- InstanceEndEditable -->
</head>

<body>
<!-- InstanceBeginEditable name="body" -->
	<div class="navegacion">
		<div>
			<a href="../index.html">Inicio</a>
			<a href="index.html">Capítulo</a>
		</div>
	</div>
	<div id="contenido">
		<h1>Fundamentos de HTML</h1>
		<h2>Elementos estructurales esenciales de un documento HTML</h2>
		<p>Aquí veremos los tags que componen la estructura básica de un documento html.</p>
		<h3>Doctype</h3>
		<p>El primer elemento de un documento html es la declaración del doctype o tipo de documento. Como vimos antes esto identifica al documento como html vinculando con el DTD, o definición de tipo de documento, del lenguaje. Además se utiliza para indicar la versión particular de html y el nivel de acatamiento de las recomendaciones del W3C.</p>
		<p>Ejemplo, el doctype para HTML 4.01 en modo estricto es:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;</code></pre>
		<p>La declaración del doctype puede no estar presente o incluso aparecer incompleta, por ejemplo:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;&gt;</code></pre>
		<h3>Modos de render</h3>
		<p>Los navegadores utilizan el doctype para decidir el modo de mostrar la página (render). Estos pueden ser: el modo quirks, el modo loose, o el modo strict.</p>
		<h4>Modo quirks</h4>
		<p>El modo quirks, o modo <q>no estándar</q>, es el modo de compatibilidad hacia atrás, para paginas que fueron hechas apuntando a una versión del navegador que no respetaba las recomendaciones del W3C. Generalmente se activa cuando no se indica un doctype o se indica una versión previa al html 4.</p>
		<p>En el caso del Internet Explorer 6, si el doctype no es lo primero que aparece en el documento (puede haber un comentario o una declaración xml), el navegador falla en reconocer la presencia del doctype y se activa el modo quirks.</p>
		<p>Los cambios que sufre el render estando el modo quirks activo varía según el navegador. En este tutorial vamos a utilizar siempre el modo estricto porque este nos garantiza mayor predictibilidad de cómo va a funcionar el render, y porque andar considerando las diferencias entre navegadores en modo quirks es un dolor en el culo.</p>
		<h4>Modo loose</h4>
		<p>El modo loose, o modo <q>casi estándar</q>, es un modo que se apega casi en su totalidad a las recomendaciones del W3C pero es laxo en ciertos puntos particulares que permiten una transición más ligera al modo estricto. Este modo se activa cuando usamos un doctype de html 4 en adelante pero optamos por el dtd <em>transitional</em> o el dtd de frames. No todos los navegadores ofrecen este modo, particularmente <abbr title="Internet Explorer">IE</abbr> no lo ofrece.</p>
		<p>En general, la diferencia más importante entre este modo y el modo estricto es la manera en que se trata el tag <code>&lt;img&gt;</code>. En modo estricto el tag de imágenes siempre se considera un <em>flujo</em>, como si fuera un carácter en una línea de texto, en modo loose  actúa como flujo sólo cuando se encuentra dentro de un flujo de texto. Visualmente esto significa que en el modo estricto siempre aparece un espacio vacío, o <em>aire</em>, debajo de un <code>&lt;img&gt;</code>, pero en el modo loose este aire desaparece cuando la imagen no se encuentra dentro un párrafo de texto.</p>
		<h4>Modo strict</h4>
		<p>El modo estricto, o modo <q>estándar</q>, es aquel que intenta cumplir a rajatabla las recomendaciones de la W3C.</p>
		<h3>Tag <code>&lt;html&gt;</code></h3>
		<p>El tag <code>&lt;html&gt;</code> es el tag <em>raíz</em> del documento html. Todo está contenido dentro de dicho tag.</p>
		<p>Es importante definir en este tag el atributo <code>lang</code>, indicando en él el idioma en que está escrito el documento html. El idioma se indica según el RFC 1766, generalmente usando el código de idioma según la norma ISO 639, por ejemplo, se utiliza <code>lang=&quot;es-AR&quot;</code> donde <code>es</code> es el código de idioma para el español y <code>AR</code> es el código para el país Argentina, indicando que se trata de un español hablado en la Argentina, o se utiliza <code>lang=&quot;es&quot;</code> si se utiliza un español neutro.</p>
		<p>Por el momento este sería nuestro ejemplo de documento html:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html lang=&quot;es-AR&quot;&gt;
...
&lt;/html&gt;</code></pre>
		<p>Si en lugar de html usamos xhtml debemos también utilizar el atributo <code>xmlns</code> que sirve para indicar el <em>namespace xml</em> al que pertenece el tag. Además, en lugar de <code>lang</code> debemos usar <code>xml:lang</code>:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
	&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;es-AR&quot;&gt;
...
&lt;/html&gt;</code></pre>
		<p>Los <em>namespaces</em> de xml cumplen una función similar a los dtd en los documentos xml. Como xhtml es por definición un documento xml, debemos indicar el namespace al que pertenece. Notesé además el doctype para xhtml en el ejemplo.</p>
		<p>El uso de <code>xml:lang</code> es porque xml define tal atributo como mecanismo genérico para definir el idioma en todo tipo de xml, y se prefiere su uso sobre el atributo lang de html. En caso de necesitarlo se puede combinar el uso de ambos atributos, pero hay que mantener la consistencia entre ellos, o sea, indicar el mismo idioma en ambos.</p>
		<h4>¿Por qué poner el idioma?</h4>
		<p>Porque algunos usuarios y navegadores necesitan saber el idioma y no tienen la capacidad para distinguirlo en el contenido (porque son programas). Los robots de los buscadores pueden utilizar esta información, pero particularmente los lectores de pantalla, que permiten a quienes tienen capacidades reducidas navegar sin poder ver el documento, utilizan este atributo para activar la pronunciación adecuada.</p>
		<h4>¿Y si hay más de un idioma?</h4>
		<p>Se indica el principal idioma del documento y se redefine el atributo <code>lang</code> en los lugares del documento donde cambia el idioma. Para ello puede que haga falta utilizar tags <code>div</code> o <code>span</code> para encerrar las porciones del documento que tengan otro idioma.</p>
		<h3>Tag <code>&lt;head&gt;</code></h3>
		<p>El tag <code>&lt;head&gt;</code> es el primer elemento dentro del tag <code>&lt;html&gt;</code> y contiene información sobre el documento y su contenido, la <em>metadata</em> del documento.</p>
		<h4>Tag <code>&lt;title&gt;</code></h4>
		<p>Dentro de <code>&lt;head&gt;</code> se encuentra el tag <code>&lt;title&gt;</code> que indica el título del documento.</p>
		<p>Si el documento pertenece a un grupo o árbol de documentos, se acostumbra indicarlo también en el <code>title</code>, separando el título propiamente dicho del título del grupo de documento o del <em>camino</em> realizado para llegar al documento usando caracteres separadores como el guión (-) o la barra vertical (|). Por ejemplo, este documento tiene de título <q>Elementos estructurales esenciales de un documento HTML - Tutorial Maquetado HTML</q>, <q>Elementos estructurales...</q> es el título real del documento, <q>Tutorial Maquetado HTML</q> es el grupo de documentos al que pertenece. Asimismo el título podría haber sido <q>Elementos estructurales... - Fundamentos de HTML - Tutorial Maquetado HTML</q>, indicando en este caso el camino realizado para llegar a este documento.</p>
		<p>Por el momento este sería nuestro ejemplo de documento html:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html lang=&quot;es-AR&quot;&gt;
&lt;head&gt;
	&lt;title&gt;título del documento&lt;/title&gt;
&lt;/head&gt;
...
&lt;/html&gt;</code></pre>
		<h3>Tag <code>&lt;body&gt;</code></h3>
		<p>Luego de <code>&lt;head&gt;</code> viene el tag <code>&lt;body&gt;</code> que corresponde al contenido propiamente dicho del documento. El contenido de <code>&lt;body&gt;</code> es lo que se va a mostrar al usuario como documento html.</p>
		<p>Finalmente, este sería nuestro ejemplo de documento html básico:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html lang=&quot;es-AR&quot;&gt;
&lt;head&gt;
	&lt;title&gt;título del documento&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	...
&lt;/body&gt;
&lt;/html&gt;</code></pre>
		<h3>Tags opcionales</h3>
		<p>A manera de información extra que conviene saber, es notable que la presencia de los tags de apertura y de cierre <code>html</code>, <code>head</code> y <code>body</code> no es necesaria. Por ejemplo, podemos omitir los tags de cierre:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html lang=&quot;es-AR&quot;&gt;
&lt;head&gt;
	&lt;title&gt;título del documento&lt;/title&gt;
&lt;body&gt;
	...</code></pre>
		<p>Incluso podemos omitir los tags de apertura, aunque debemos dejar el tag de apertura del <code>html</code> para indicar el idioma:</p>
		<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;
	&quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
&lt;html lang=&quot;es-AR&quot;&gt;
	&lt;title&gt;título del documento&lt;/title&gt;
	...</code></pre>
		<p>Esta información aparentemente anecdótica es en realidad sumamente valiosa a la hora de optimizar un sitio web para muy alta concurrencia, donde cada byte cuenta. Aunque es improbable que terminemos trabajando en una situación donde sea realmente necesario una optimización tan fina, no está de más saberlo.</p>
		<p>Hay que recordar que al usar xhtml esto deja de cumplirse, ya que se requiere la presencia del tag de cierre para ser xml valido.</p>
		<h3 class="mas-informacion">Más información</h3>
		<ul class="mas-informacion">
			<li><a href="../anexos/lista-de-doctypes.html">Lista de doctypes</a></li>
		</ul>
</div>
	<div class="navegacion">
		<a class="anterior" href="tablas-o-divs.html">Anterior</a>
		<a class="siguiente" href="#">Siguiente</a>
	</div>
<!-- InstanceEndEditable -->
	<div id="licencia">
		<p>Esta obra está bajo una licencia Reconocimiento-No comercial-Sin obras derivadas 2.5 Argentina de Creative Commons. Para ver una copia de esta licencia, visite <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/">http://creativecommons.org/licenses/by-nc-nd/2.5/ar/</a> o envie una carta a Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.</p>
	</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1794443-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
<!-- InstanceEnd --></html>
